<template>
  <div class="chartDom" style="width: 100%;">
    <a :title="$t('保存为图片')" @click="download()"><svg-icon icon-class="chartDown" /></a>
    <div id="container" style="width: 100%;" />
  </div>
</template>

<script>
import { moneyFormat } from '@/utils/ruoyi'
import G6 from '@antv/g6'
export default {
name: 'StructureChart',
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 图形变量
      graph: undefined
    }
  },
  watch: {
    chartData(newVal) {
      if (this.graph) {
        const width = document.getElementById('container').scrollWidth
        const height = document.getElementById('container').scrollHeight || 500
        this.graph.changeSize(width, height)
      }
      if (newVal.nodes) {
        newVal.edges.forEach((edge) => {
          console.log(edge)
          edge.label = this.$t('持股比例(%)：') + edge.shareholderRatio + '\n' + this.$t('投资金额') + this.$t('金额单位') + '：' + moneyFormat(edge.amount, 'w')
        })
        // this.graph.data(this.chartData)
        // this.graph.render()
        this.graph.data(newVal)
        this.graph.render()
      } else {
        this.graph.data(newVal)
        this.graph.render()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    download() {
      this.graph.downloadImage('股权架构')
    },
    initChart() {
      G6.registerNode(
        'sql',
        {
          drawShape(cfg, group) {
            const rect = group.addShape('rect', {
              attrs: {
                x: -75,
                y: -25,
                width: 150,
                height: 50,
                radius: 10,
                stroke: '#5B8FF9',
                fill: '#C6E5FF',
                lineWidth: 3
              },
              size: 200,
              name: 'rect-shape'
            })

            if (cfg.label) {
              const label = (cfg.label.length > 8) ? (cfg.label.substring(0, 9) + '\n' + cfg.label.substring(8, cfg.label.length)) : cfg.label
              group.addShape('text', {
                attrs: {
                  text: label,
                  x: 0,
                  y: 0,
                  fill: '#000',
                  fontSize: 12,
                  textAlign: 'center',
                  textBaseline: 'middle'
                },
                name: 'text-shape'
              })
            }
            return rect
          }
        },
        'single-node'
      )
      const container = document.getElementById('container')
      const width = container.scrollWidth
      const height = container.scrollHeight || 500
      this.graph = new G6.Graph({
        container: 'container',
        width,
        height,
        fitView: true,
        maxZoom: 1.5,
        layout: {
          type: 'dagre',
          nodesep: 150,
          ranksep: 40,
          rankdir: 'TB'
        },
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'drag-node']
        },
        defaultNode: {
          type: 'sql',
          labelCfg: {
            style: {
              fill: 'transparent'
            }
          }
        },
        defaultEdge: {
          type: 'polyline',
          // 边样式配置
          style: {
              stroke: '#409EFF', // 边描边颜色
              endArrow: {
                  path: G6.Arrow.triangle(5, 5, 0), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
                  d: 0,
                  fill: '#409EFF',
                  opacity: 0.5,
                  lineWidth: 1
              }
          },
          labelCfg: {
              position: 'center'
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.g6-tooltip {
  border-radius: 6px;
  font-size: 12px;
  color: #fff;
  background-color: #000;
  padding: 2px 8px;
  text-align: center;
}
</style>
